<template>
    <div>
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="onClickLeft" />

        <van-tabs @click="onClick">
            <van-tab :title="item.name" v-for="(item, index) in message.navData">
                <div style="padding: 10px;">
                    <div class="box">
                        <h4 style="margin: 10px;">{{ item.name }}</h4>
                        <p>{{ item.front_desc }}</p>
                    </div>

                    <van-row type="flex">
                        <van-col span="12" v-for="item in mes" class="box2">
                            <van-image width="10rem" height="10rem" fit="contain" :src="item.list_pic_url" />
                            <p>{{ item.name }}</p>
                            <span>{{ item.retail_price }}</span>
                        </van-col>
                    </van-row>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { JumpHome } from "@/api/Home/index";
import { HomeRendering } from "@/api/Home/index";
export default {
    name: 'BusinessHomeKitchen',

    data() {
        return {
            message: [],
            mes: [],
            list: [1005000, 1005001, 1005002, 1008000, 1010000, 1011000, 1012000, 1013001, 1019000]
        };
    },

    mounted() {

    },

    methods: {
        //请求两次数据
        async succeed(id) {
            const { data: res } = await JumpHome(id)
            this.message = res
            console.log(this.message);
        },
        async twoSucceed(id) {
            const { data: res } = await HomeRendering(id)
            this.mes = res.data;
            console.log(this.mes);
        },
        onClickLeft() {
            this.$router.replace('/')
        },
        onClick(title) {
            this.twoSucceed(this.list[title])
        }
    },
    created() {
        this.succeed(1005000)
        this.twoSucceed(1005000);
    }
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    display: flex;
    background-color: #f9f4e5;
    justify-content: center;
    align-items: center;
    height: 15vh;
    flex-direction: column
}

.box p {
    font-size: 14px;
    color: #666;

}

.box h4 {
    font-weight: 400;
}

.box2 p {
    font-size: 14px;
}

.box2 span {
    color: rgb(83, 3, 3);
    font-size: 12px;
}
</style>